<template>
  <div class="medicine-detail">
    <el-card>
      <el-row :gutter="20">
        <!-- 药品图片 -->
        <el-col :xs="24" :sm="10" :md="8">
          <div class="medicine-image">
            <el-image 
              :src="medicine.image || 'https://via.placeholder.com/300x300?text=药品图片'" 
              fit="cover"
              :alt="medicine.name"
            ></el-image>
          </div>
        </el-col>
        
        <!-- 药品信息 -->
        <el-col :xs="24" :sm="14" :md="16">
          <div class="medicine-info">
            <h1 class="medicine-name">{{ medicine.name }}</h1>
            <div class="medicine-price">¥{{ medicine.price }}</div>
            <div class="medicine-type">类型：{{ medicine.type }}</div>
            
            <el-divider></el-divider>
            
            <div class="medicine-desc">
              <h3>成分说明</h3>
              <p>{{ medicine.ingredients || '暂无成分说明' }}</p>
              
              <h3>用法用量</h3>
              <p>{{ medicine.usageInfo || '暂无用法用量说明' }}</p>
              
              <h3>禁忌</h3>
              <p>{{ medicine.contraindication || '暂无禁忌说明' }}</p>
            </div>
            
            <el-divider></el-divider>
            
            <div class="medicine-action">
              <el-input-number v-model="quantity" :min="1" :max="99" size="large" />
              <el-button type="primary" size="large" @click="addToCart" :loading="loading">
                <el-icon><ShoppingCart /></el-icon> 加入购物车
              </el-button>
              <el-button size="large" @click="goBack">
                <el-icon><Back /></el-icon> 返回列表
              </el-button>
            </div>
          </div>
        </el-col>
      </el-row>
    </el-card>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import { ShoppingCart, Back } from '@element-plus/icons-vue'
import { getMedicine } from '@/api/medicine'

const route = useRoute()
const router = useRouter()

// 药品ID
const medicineId = route.params.id

// 药品信息
const medicine = ref({})

// 购买数量
const quantity = ref(1)

// 加载状态
const loading = ref(false)

// 获取药品详情
onMounted(async () => {
  try {
    const res = await getMedicine(medicineId)
    medicine.value = res || {}
  } catch (error) {
    console.error('获取药品详情失败', error)
    // 模拟数据
    medicine.value = {
      id: medicineId,
      name: '阿司匹林肠溶片',
      price: 15.8,
      type: '解热镇痛药',
      ingredients: '阿司匹林、淀粉、硬脂酸镁等',
      usageInfo: '口服。一次1片，一日3次，饭后服用。',
      contraindication: '对阿司匹林及水杨酸类药物过敏者禁用；有活动性消化性溃疡病史者禁用；有出血倾向者禁用；妊娠晚期妇女禁用。',
      image: ''
    }
  }
})

// 添加到购物车
const addToCart = () => {
  loading.value = true
  
  // 模拟添加到购物车的操作
  setTimeout(() => {
    // 从本地存储获取购物车数据
    let cart = localStorage.getItem('cart')
    if (cart) {
      try {
        cart = JSON.parse(cart)
      } catch (error) {
        cart = []
      }
    } else {
      cart = []
    }
    
    // 检查是否已存在相同药品
    const existingItemIndex = cart.findIndex(item => item.id === medicine.value.id)
    
    if (existingItemIndex > -1) {
      // 更新数量
      cart[existingItemIndex].quantity += quantity.value
    } else {
      // 添加新药品
      cart.push({
        id: medicine.value.id,
        name: medicine.value.name,
        price: medicine.value.price,
        image: medicine.value.image,
        quantity: quantity.value
      })
    }
    
    // 保存到本地存储
    localStorage.setItem('cart', JSON.stringify(cart))
    
    ElMessage.success('已添加到购物车')
    loading.value = false
  }, 500)
}

// 返回列表
const goBack = () => {
  router.back()
}
</script>

<style scoped>
.medicine-detail {
  padding: 20px 0;
}

.medicine-image {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 300px;
  overflow: hidden;
  border: 1px solid #ebeef5;
  border-radius: 4px;
}

.medicine-image .el-image {
  width: 100%;
  height: 100%;
}

.medicine-info {
  padding: 10px;
}

.medicine-name {
  margin: 0 0 15px 0;
  font-size: 24px;
  color: #303133;
}

.medicine-price {
  color: #f56c6c;
  font-size: 28px;
  font-weight: bold;
  margin-bottom: 10px;
}

.medicine-type {
  color: #909399;
  font-size: 16px;
  margin-bottom: 10px;
}

.medicine-desc h3 {
  font-size: 16px;
  color: #303133;
  margin: 15px 0 5px 0;
}

.medicine-desc p {
  margin: 5px 0 15px 0;
  color: #606266;
  line-height: 1.6;
}

.medicine-action {
  display: flex;
  align-items: center;
  gap: 15px;
  margin-top: 20px;
}
</style>